<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件练习（鼠标、键盘、页面）</title>
    <style>
        body {
            height: 3000px;
        }
        
        .max {
            width: 300px;
            height: 300px;
            background-color: red;
            overflow-y: scroll;
        }
        
        .min {
            width: 300px;
            height: 900px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="max">
        <div class="min"></div>
    </div>


    <script>
        // //获取节点
        // let min = document.getElementsByClassName("min")[0];
        // let max = document.getElementsByClassName("max")[0];

        // //鼠标事件
        // //1.单击
        // min.addEventListener("click", function() {
        //     console.log("单击");
        // }, false);

        // //2.双击
        // min.addEventListener("dblclick", function() {
        //     console.log("双击");
        // }, false);

        // /* min.ondblclick=function(){
        //     console.log("双击");
        // } */

        // //3.鼠标按下任意键（左右、滚轮）
        // // min.addEventListener("mousedown",function(){
        // //     console.log("鼠标按下");
        // // },false);


        // //4.鼠标任意按键抬起
        // // min.addEventListener("mouseup",function(){
        // //     console.log("鼠标抬起");
        // // },false);

        // //5.鼠标进入元素：再进入子元素，就不算进入
        // max.addEventListener("mouseenter", function() {
        //     console.log("鼠标进入");
        // }, false);


        // //6.鼠标离开元素：再进出子元素，就不算离开
        // max.addEventListener("mouseenter", function() {
        //     console.log("鼠标离开");
        // }, false);


        // //7.鼠标进入元素：再次进入子元素，也算进入元素
        // max.addEventListener("mouseover", function() {
        //     console.log("鼠标进入");
        // }, false);


        // //8.鼠标离开元素：再次进出子元素，也算离开元素
        // max.addEventListener("mouseout", function() {
        //     console.log("鼠标离开");
        // }, false);

        // //9.鼠标移动
        // max.addEventListener("mousemove", function() {
        //     console.log("鼠标移动");
        // }, false);


        // //键盘事件：只能是document调用键盘事件

        // //1.按下键盘任意键时触发，按住不放会反复触发

        // document.addEventListener("keydown", function() {
        //     console.log("按下任意键盘");
        // }, false)

        // //2.按下键盘上的字符键时触发，按住不放会反复触发（mac除外）

        // document.addEventListener("keypress", function() {
        //     console.log("按下任意字符键");
        // }, false)

        // //3.按下键盘上的任意键抬起来时触发

        // document.addEventListener("keyup", function() {
        //     console.log("键盘按键抬起");
        // }, false)


        // //页面事件

        // //1.页面加载：一般用于window调用事件
        // window.addEventListener("load", function() {
        //     console.log("页面加载");
        //     alert("页面加载");
        // }, false);


        // //2.页面卸载：一般用于window调用事件
        // window.addEventListener("unload", function() {
        //     console.log("页面卸载");
        //     alert("页面卸载");
        // }, false);

        // //3.页面滚动：可以用于整个页面，也可以用于某个元素
        // window.addEventListener("scroll", function() {
        //     console.log(max.scrollTop); //垂直方向
        //     console.log(document.documentElement.scrollLeft); //水平方向
        // }, false);

        // let bd = document.body;
        // console.log(bd);
        // window.addEventListener("scroll", function() {
        //     console.log(document.documentElement.scrollTop);
        // }, false);

        // //4.可视窗口大小调整：只能window对象调用该方法

        // window.addEventListener("resize", function() {
        //     console.log("可视窗口大小调整");
        //     console.log(innerWidth); //可视窗口的宽度
        //     console.log(innerHeight); //可视窗口的高度
        // }, false)


        //event:事件对象，在调用事件的时候，给回调函数传入的隐含参数
        //event对象：会包含当前事件的相关信息

        min.onclick = function() {
            console.log("单击事件");
            console.log(event);
        }

        document.onk
    </script>
</body>

</html>